<%@page contentType="text/html" pageEncoding="UTF-8"%>
<HTML>
<HEAD>
<TITLE>Layout Example</TITLE>
	<LINK rel="stylesheet" href="styles/global.css" type="text/css">
        <LINK rel="stylesheet" href="styles/documentation.css" type="text/css">
<SCRIPT type="text/javascript" src="scripts/jquery-1.6.1.min.js"></SCRIPT>
<SCRIPT type="text/javascript" src="scripts/jquery.ui.all.js"></SCRIPT>
<SCRIPT type="text/javascript" src="scripts/jquery.layout.min.js"></SCRIPT>
	<script type="text/javascript">

	var myLayout; // a var is required because this page utilizes: myLayout.allowOverflow() method

	$(document).ready(function () {
		myLayout = $('body').layout({
			defaults: {
			}
		,	north: {
				size:					"auto"
			,	spacing_open:			0
			,	closable:				false
			,	resizable:				false
			}
		,	west: {
				size:					250
			,	spacing_closed:			22
			,	togglerLength_closed:	140
			,	togglerAlign_closed:	"top"
			,	togglerContent_closed:	"C<BR>o<BR>n<BR>t<BR>e<BR>n<BR>t<BR>s"
			,	togglerTip_closed:		"Open & Pin Contents"
			,	sliderTip:				"Slide Open Contents"
			,	slideTrigger_open:		"mouseover"
			}
		});

		
 	});

	</script>




</head>
<body>
<div class="ui-layout-north" >

	<DIV id="logo">ESB</DIV>
	<DIV id="navigation">
		<A href="index.cfm"  class="current">存量房管理</A>
		<A href="demos.cfm">系统管理</A>
	</DIV>
</div>

<!-- allowOverflow auto-attached by option: west__showOverflowOnHover = true -->
<div class="ui-layout-west">
<DIV class="header">Contents</DIV>
	<DIV class="ui-layout-content">
		<UL id="TOC">
			<LI><A href="#top">UI.Layout</A></LI>
			<LI><A href="#Depends_on">Depends on</A></LI>
			<LI><A href="#Browsers">Supported Browsers</A></LI>
			<LI><A href="#Demos">Demos</A></LI>
			<LI><A href="#Example">Example</A></LI>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Terminology">Terminology</A>
				<UL>
					<LI><A href="#Container">Container</A></LI>
					<LI><A href="#Panes">Panes</A></LI>
					<LI><A href="#Pane_Spacing">Pane Spacing</A></LI>
					<LI><A href="#Resizer">Resizer / Resizer-bar</A></LI>
					<LI><A href="#Slider">Slider / Slider-bar</A></LI>
					<LI><A href="#Toggler">Toggler / Toggler-button</A></LI>
				</UL>
			</LI>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Properties_Methods">Layout Properties &amp; Methods</A>
				<UL>
					<LI><A href="#Properties">Properties</A></LI>
					<LI><A href="#Methods">Methods</A></LI>
					<LI><A href="#Utility_Methods">Utility Methods</A></LI>
				</UL>
			</LI>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Options">Options</A>
				<UL>
					<LI><A href="#Sub-Key_Format">Sub-Key Format for Options</A></LI>
					<LI><A href="#List_Format">List Format for Options</A></LI>
					<LI><A href="#Option_Specificity">Option Specificity</A></LI>
					<LI><A href="#Selector_Options">Selector Options</A></LI>
					<LI><A href="#Class_Options">Class Options</A></LI>
					<LI><A href="#List_of_Options"><B>List of Options</B></A></LI>
				</UL>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Layout_State">Reading the Layout-State</A>
				<UL>
					<LI><A href="#Logic_Vars">Auto-Generated Logic-vars</A></LI>
					<LI><A href="#Reading_Size">Reading Pane-Size</A></LI>
					<LI><A href="#Saving_State">Saving the  Layout State</A></LI>
				</UL>
			</LI>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Callback_Functions">Using Callback Functions</A>
				<UL>
					<LI><A href="#Callback_Parameters">Callback Parameters</A></LI>
				</UL>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Style_Reference">Style Reference</A>
				<UL>
					<LI><A href="#Generated_Classes">Auto-Generated Classes</A></LI>
					<LI><A href="#Resizing_Classes">Classes Added During Resizing</A></LI>
					<LI><A href="#Resizer_Graphics">Resizer &amp; Toggler Graphics</A></LI>
					<LI><A href="#Custom_Button_Classes">Custom Button Classes</A></LI>
				</UL>
			</LI>
			<LI><A href="#Auto-Generated_IDs">Auto-Generated IDs</A></LI>
			<LI><A href="#Content-Scrolling">Content-Scrolling <SPAN style="font-size: 0.8em; white-space: nowrap;">&nbsp;(Headers &amp; Footers)</SPAN></A></LI>
			<LI><SPAN class="tocBtn"></SPAN><A href="#Utilities">Special Utility Methods</A>
				<UL>
					<LI><A href="#Custom_Buttons">Creating Custom Toggler Buttons</A></LI>
					<LI><A href="#Drop-Downs">Working with Drop-Downs and Pop-Ups</A></LI>
				</UL>
			</LI>
		</UL>
	</DIV>
</div>



<div class="ui-layout-center">
	ui-layout-center
</div>

</body>
</html>